<template>
	<view class="page">
       <headerline shownav=true  isback="true" @tapnav="tapnav"   :navstyle="navstyle"  :navitem="navitem"  :navselect="navselect" :statusbarheight='statusBarHeight'  ></headerline>
 

         <view v-if="navselect==0">
      
                 <ul class="cardManage clearFix" id="_bankList" style="clear: both;margin-top: 10px;">
                
                
                   
                        <li class="bank_item" v-for="(value,index) in bank" :key='index'>
                            <dl>
                                <dd><span> {{value['bankname']}}</span><span>持卡人：{{value['realname']}}</span></dd>
                                <dd><span>卡号：{{value['number']}}</span></dd></dl>
                            <p class="bank_bottom">绑定时间：{{$action.timestampToTime(value['time'])}}<span></span></p>
                
                            <span class="bank_default" v-if="value.default==1"><image src="../../static/img/bank_img.png" style="height:60px;width:60px;"></span>
                
                        </li>
                
                    
                
                    </ul>
                
                    <div class="nodata" style="color: #666;clear: both;margin-top: 10px;text-align: center">
                
                        最多可以绑定<span style="color: #ff0000">{{system['bank_num']}}</span>张银行卡
                
                    </div>

             
         </view>
         
         
         <view v-else>
             <ul class="profile" >
                    <li>姓　　名：</li>
                    <li>
                        <block v-if="banklen>0">
                            {{realname}}
                        </block>
                        <input v-else v-model="realname" class="input1"  />
                     
                    </li>
                </ul>
                <ul class="profile" >
                    <li>卡　　号：</li>
                    <li><input name="banknum" id="banknum" type="digit" v-model="banknum"  class="input1">
                    </li>
                </ul>
            
                <ul class="profile" >
                    <li>选择银行：</li>
                    <li>
                       <picker @change="bindbankChange" :value="bankid" :range="banklist">
                           <view class="uni-input">{{bankname}}</view>
                       </picker>
            
            
                    </li>
                </ul>
            
                <ul class="profile" >
                    <li>所在地区：</li>
                    <li>
                   <picker mode="multiSelector" @cancel="oncancel()"  @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="area">
                   	<view class="uni-input" @tap="tapaddress();">{{item.province}},{{item.city}}</view>
                   </picker>
                    </li>
                </ul>
            
                <ul class="profile" >
                    <li>支行名称：</li>
                    <li>
                        <input type="text" name="mark" v-model="mark" class="input1" id="mark">
                    </li>
                </ul>
            
                <ul class="profile" >
                    <li>首 选 卡：</li>
                    <li>
                   <picker @change="binddefaultChange" :value="isdefault" :range="default_arr">
                       <view class="uni-input">{{default_arr[isdefault]}}</view>
                   </picker>
                           
                    </li>
                </ul>
                <ul class="profile" >
                    <li>资金密码：</li>
                    <li>
                        <input type="password" name='pwd' id='pwd' v-model='pwd' class="input1" maxlength="6">
                    </li>
            
                </ul>
                 <view style="margin:15px auto;display:block;width: 80%;">
                              
                 
                     <button class="button1" @tap="click_bind()">
                         确认并提交
                     </button>
                              
                 
                 </view>
             
                
             
         </view>
    </view>
</template>

<script>
    import api from "../../library/index.js"
    import headerline from '../../components/header.vue'
    import http from "../../library/http.js"
       import uniIcons from '../../components/uni-icons/uni-icons.vue'
        import address from '../../library/address.js'
      var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ;
    	export default {
       components: {
      uniIcons,
          headerline,
         
          },
       data() {    
            return {
                
              statusBarHeight: statusBarHeight+ 'px',
              navitem:['我的银行卡','新增银行卡'],
              navselect:0,
              navstyle:"width:60%;left:20%",
              user: uni.getStorageSync('userInfo'),
              system: uni.getStorageSync('system'),
              bank: uni.getStorageSync('bank'),
              banklen:0,
               banklist: uni.getStorageSync('banklist'),
              realname:'',
              default_arr:['否','是'],
              isdefault:1,
              province:[],
              city:[],
              	multiIndex: [0, 0],
                  area:[['省份'],['城市']],
                  showarea:0,
                  provice1:'',
                  city1:'',
                  provice2:'',
                  city2:'',
                  c1:0,
                  c2:0,
               item:{'province':'省份','city':'城市'},
               bankname:'工商银行',
               banknum:'',
               pwd:'',
               mark:'',
               bankid:0,
             
            }
        },
        methods: {
           tapnav(num){
              
                 if(num==0 && this.banklen==0){
                     uni.showToast({
                         title:'您还没有绑定任何银行卡',
                         icon:'none'
                     })
                 }
                 else{
                     if(this.banklen>=this.system['bank_num']){
                         uni.showToast({
                             title:'每个用户最多只能绑定'+this.system['bank_num']+'张银行卡',
                             icon:'none'
                         })
                     }
                     else
                     this.navselect=num;
                 }
                    
                   
               
           },
         binddefaultChange(e){
         this.isdefault = e.target.value
         },
         bindbankChange(e){
        var num= e.target.value;
        this.bankname=this.banklist[num] 
          this.bankid=num;
     
         },
         
         setbanknum(num){
         
                    
         },
     tapaddress(){
                
                //  console.log( this.sex);
                  
              //   console.log( this.area[0]);
                 //     console.log( this.area[1]);
               this.provice2=this.item.province;
               this.city2=this.item.city; 
            },
            bindMultiPickerColumnChange(e){
                var detail= e.detail;
                detail.value=parseInt(detail.value);
                if(detail.column==0){
                  // console.log(this.city[detail.value].city);
                   this.c1=detail.value;
                    this.area[1]=this.city[detail.value].city;
                    this.multiIndex[0]=detail.value;
                    this.provice1=this.city[detail.value].province;
                    this.city1=this.area[1][this.c2];
                     
                }
                else{
                    this.c2=detail.value;
                    this.multiIndex[1]=detail.value;
                   this.city1=this.area[1][detail.value];
                   
                }
                this.item.province=this.provice1
                this.item.city=this.city1

               
            },
            oncancel(){
              this.item.province=this.provice2
              this.item.city=this.city2
            },
            getAddress(){
                if(!this.item.province || this.item.province==null) this.item.province='省份';
                if(!this.item.city || this.item.city==null) this.item.city='城市';
                var c1=0;
               
                address.forEach(item=>{
                    
                    this.province.push(item.provinceName);
                //    console.log(this.item.province,item.provinceName);
                  if(this.item.province==item.provinceName)this.multiIndex[0]=parseInt(c1);
                    c1++;
                    var arr={};
                    arr.province=item.provinceName;
                    var city1=[];
                    var c2=0;
                    item.city.forEach(c=>{
                        if(c.cityName!='')
                       city1.push(c.cityName) 
             if(this.item.province==item.provinceName && this.item.city==c.cityName)this.multiIndex[1]=parseInt(c2); 
                       
                       c2++;
                    })
                    arr.city=city1;
                    this.city.push(arr)
                    
                })
                //  console.log(this.province);
                // this.area=[];
                
                 this.area[0]=this.province;
               this.area[1]=this.city[this.multiIndex[0]].city;
              this.showarea=1;
            },
            getuserinfo(){
                var postdata={
                         	id: uni.getStorageSync('access_token')
                            };
                http.setWait(false).post('user.php?act=userinfo',postdata).then(res=>{
                         this.user=res.data;
                         uni.setStorageSync('userInfo',this.user)
                         })
                     
            },
               getbank(){
                   var postdata={
                            	userid: uni.getStorageSync('access_token')
                               };
                   http.setWait(false).post('user.php?act=mybank',postdata).then(res=>{
                                   this.bank=res.data;
                                 
                                   uni.setStorageSync('bank',this.bank)
                                   if(res.num<1) this.tapnav(1);
                                   else{
                                       this.realname=res.data[0].realname;
                                       this.isdefault=0;
                                   }
                                   this.banklen=res.num;
                                 var banklist=[];
                                 
                              
                                 for(var ii in res.banklist){
                                     banklist.push(res.banklist[ii])
                                 }
                                   this.banklist=banklist;
                                 uni.setStorageSync('banklist',banklist);
                                 this.getuserinfo();
                                   
                            })
               },
              click_bind() {
                      if (this.realname=='') {
                          uni.showToast({
                              title:'请输入开户姓名',
                              icon:'none'
                          })
                         
                          return false;
                      }
              
                      if (this.realname.length<2 || this.realname.length>4 ) {
                         
                    uni.showToast({
                        title:'开户姓名最多四个字',
                        icon:'none'
                    })
                          return false;
                      }
              
                      var reglx = /^[\u0391-\uFFE5]+$/;
                      if(!reglx.test(this.realname)){
                         
                       uni.showToast({
                           title:'开户姓名只能包含中文',
                           icon:'none'
                       })
                          return false;
                      }
              
              
                      if (this.banknum == "") {
                          uni.showToast({
                              title:'请输入银行卡号',
                              icon:'none'
                          })
                         
                          return false;
                      }
                      
                              if(this.banknum.length < 15 || this.banknum.length > 19) {
                                  uni.showToast({
                                      title:'银行卡号长度必须在15到19之间',
                                      icon:'none'
                                  })
                                  
                                  return false;
                              }
                              var num = /^\d*$/;
                              //全数字
                              
                           if(!num.exec(this.banknum)) {
                               uni.showToast({
                                   title:'银行卡号必须全为数字',
                                   icon:'none'
                               })
                          
                                 return false;
                           }
               //        var regExp = /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/;
               //        if(!regExp.test(this.banknum)){
               
               //            uni.showToast({
               //                title:'银行卡号格式不正确',
               //                icon:'none'
               //            })
               //            return false;
               //        }
                      if(this.item.city=='城市'){
                       
              
              uni.showToast({
                  title:'请输选择开户行所在地区',
                  icon:'none'
              })
                          return false;
              
                      }
                      if (this.mark == "") {
                          uni.showToast({
                              title:'请输入支行名称',
                              icon:'none'
                          })
                          return false;
                      }
                      if (this.pwd == "") {
                          uni.showToast({
                              title:'请输入资金密码',
                              icon:'none'
                          })
                          return false;
                      }
                      if(parseInt(this.pwd)>0 && parseInt(this.pwd)<1000000 && this.pwd.length==6){
              
                      }else{
                          uni.showToast({
                              title:'资金密码必须为6位数字',
                              icon:'none'
                          })
                        
                          return false;
                      }
                      if(this.$action.check_userlock()==false) return false;
         
                      http.setWait(true).post('user.php?act=bank_add',{userid:this.user.id,bankname:this.bankname,realname:this.realname ,banknum:this.banknum,province:this.item.province,city:this.item.city,mark:this.mark,default:this.isdefault,pwd:this.pwd}).then(res=>{
                               this.getbank();
                               
                              this.navselect=0
                               uni.showToast({
                                  icon:'none',
                                  title:'银行卡绑定成功',
                                  duration:1000
                               })    
                               })
               
                  }
               
        },
        onLoad(opts) {
          this.getbank();
           this.getAddress();
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/static/css/user.css";
  .page{
      background-color: #fafafa;
  }
  .profile,.login-lines1{
      background-color: #fff;
      margin: 10px auto;
      width: 100%;
     vertical-align: middle; 
  }
  .profile li{
      vertical-align: middle;
  }
  .profile li:first-child{
      width:100px
  }
  .profile li:last-child{
      width:calc(100% - 130px)
  }

</style>
